<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="static/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="static/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="static/css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="static/css/optstyle.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="static/js/jquery.js"></script>

</head>

<body>
<div id="container">
<!--顶部导航条 -->
<div class="am-container header">
	<ul class="message-l">
		<div class="topMessage">
			<div class="menu-hd" v-if="isLogin">
				{{username}},欢迎您
			</div>
			<div class="menu-hd" v-else>
				<a href="login.html" target="_top" class="h">亲，请登录</a>
				<a href="register.html" target="_top">免费注册</a>
			</div>
		</div>
	</ul>
	<ul class="message-r">
		<div class="topMessage home">
			<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
		</div>
		<div class="topMessage my-shangcheng">
			<div class="menu-hd MyShangcheng">
				<a href="user-center.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a>
			</div>
		</div>
		<div class="topMessage mini-cart">
			<div class="menu-hd">
				<a id="mc-menu-hd" href="shopcart.html" target="_top">
				<i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong>
				</a>
			</div>
		</div>
		<div class="topMessage favorite">
			<div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
	</ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
	<div class="logo"><img src="static/images/logo.png" /></div>
	<div class="logoBig">
		<li><img src="static/images/logobig.png" /></li>
	</div>

	<div class="search-bar pr">
		<a name="index_none_header_sysc" href="#"></a>
		<form>
			<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
			<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
		</form>
	</div>
</div>

<div class="clear"></div>

<!--购物车 -->
<div class="concent">
	<div id="cartTable">
		<div class="cart-table-th">
			<div class="wp">
				<div class="th th-chk">
					<div id="J_SelectAll1" class="select-all J_SelectAll">

					</div>
				</div>
				<div class="th th-item">
					<div class="td-inner">商品信息</div>
				</div>
				<div class="th th-price">
					<div class="td-inner">单价</div>
				</div>
				<div class="th th-amount">
					<div class="td-inner">数量</div>
				</div>
				<div class="th th-sum">
					<div class="td-inner">金额</div>
				</div>
				<div class="th th-op">
					<div class="td-inner">操作</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<template v-for="sc,index in shopcarts">
			<tr class="item-list">
				<div class="bundle  bundle-last ">
					<div class="bundle-main">
						<ul class="item-content clearfix">
							<li class="td td-chk">
								<div class="cart-checkbox ">
									<input class="check" id="J_CheckBox_170037950254" name="items[]" :value="index" v-model="opts" type="checkbox">
									<label for="J_CheckBox_170037950254"></label>
								</div>
							</li>
							<li class="td td-item">
								<div class="item-pic">
									<a :href="'introduction.html?pid='+sc.productId" target="_blank" :data-title="sc.productName" class="J_MakePoint" data-point="tbcart.8.12">
										<img :src="'static/pimg/'+sc.productImg" width="70" class="itempic J_ItemImg">
									</a>
								</div>
								<div class="item-info">
									<div class="item-basic-info">
										<a :href="'introduction.html?pid='+sc.productId" target="_blank" :title="sc.productName" class="item-title J_MakePoint" data-point="tbcart.8.11">{{sc.productName}}</a>
									</div>
								</div>
							</li>
							<li class="td td-info">
								<div class="item-props item-props-can">
									<span class="sku-line">{{sc.skuProps}}</span>
<!--									<span class="sku-line">颜色：12#川南玛瑙</span>-->
<!--									<span class="sku-line">包装：裸装</span>-->
<!--									<span tabindex="0" class="btn-edit-sku theme-login">修改</span>-->
<!--									<i class="theme-login am-icon-sort-desc"></i>-->
								</div>
							</li>
							<li class="td td-price">
								<div class="item-price price-promo-promo">
									<div class="price-content">
										<div class="price-line">
											<em class="price-original">{{sc.originalPrice}}</em>
										</div>
										<div class="price-line">
											<em class="J_Price price-now" tabindex="0">{{sc.sellPrice}}</em>
										</div>
									</div>
								</div>
							</li>
							<li class="td td-amount">
								<div class="amount-wrapper ">
									<div class="item-amount ">
										<div class="sl">
											<input class="min am-btn" name="" type="button" value="-" @click="changeNum" :data-id="index" data-oper="-"/>
											<input class="text_box" name="" type="text" :value="sc.cartNum" style="width:30px;" />
											<input class="add am-btn" name="" type="button" value="+" @click="changeNum" :data-id="index" data-oper="+"/>
										</div>
									</div>
								</div>
							</li>
							<li class="td td-sum">
								<div class="td-inner">
									<em tabindex="0" class="J_ItemSum number">{{sc.sellPrice*sc.cartNum}}</em>
								</div>
							</li>
							<li class="td td-op">
								<div class="td-inner">
<!--									<a title="移入收藏夹" class="btn-fav" href="#">移入收藏夹</a>-->
									<a href="javascript:;" data-point-url="#" class="delete" :data-id="index" @click="delCartShop">删除</a>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</tr>
		</template>


		<div class="clear"></div>
	</div>
	<div class="clear"></div>

	<div class="float-bar-wrapper">
		<div id="J_SelectAll2" class="select-all J_SelectAll">
			<div class="cart-checkbox">
				<input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
				<label for="J_SelectAllCbx2"></label>
			</div>
			<span>全选</span>
		</div>
		<div class="operations">
			<a href="#" hidefocus="true" class="deleteAll">删除</a>
			<a href="#" hidefocus="true" class="J_BatchFav">移入收藏夹</a>
		</div>
		<div class="float-bar-right">
			<div class="amount-sum">
				<span class="txt">已选商品</span>
				<em id="J_SelectedItemsCount">{{opts.length}}</em><span class="txt">件</span>
				<div class="arrow-box">
					<span class="selected-items-arrow"></span>
					<span class="arrow"></span>
				</div>
			</div>
			<div class="price-sum">
				<span class="txt">合计:</span>
				<strong class="price">¥<em id="J_Total">{{totalPrice}}</em></strong>
			</div>
			<div class="btn-area" @click="gotoOrderAdd">
				<a href="#" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
					<span>结&nbsp;算</span></a>
			</div>
		</div>

	</div>

	<div class="footer">
		<div class="footer-hd">
			<p>
				<a href="#">锋迷商城</a>
				<b>|</b>
				<a href="#">商城首页</a>
				<b>|</b>
				<a href="#">支付宝</a>
				<b>|</b>
				<a href="#">物流</a>
			</p>
		</div>
		<div class="footer-bd">
			<p>
				<a href="#">关于千锋</a>
				<a href="#">合作伙伴</a>
				<a href="#">联系我们</a>
				<a href="#">网站地图</a>
				<em>©qfedu.com 版权所有</em>
			</p>
		</div>
	</div>

</div>

<!--操作页面-->

<div class="theme-popover-mask"></div>

<div class="theme-popover">
	<div class="theme-span"></div>
	<div class="theme-poptit h-title">
		<a href="javascript:;" title="关闭" class="close">×</a>
	</div>
	<div class="theme-popbod dform">
		<form class="theme-signin" name="loginform" action="" method="post">

			<div class="theme-signin-left">

				<li class="theme-options">
					<div class="cart-title">颜色：</div>
					<ul>
						<li class="sku-line selected">12#川南玛瑙<i></i></li>
						<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
					</ul>
				</li>
				<li class="theme-options">
					<div class="cart-title">包装：</div>
					<ul>
						<li class="sku-line selected">包装：裸装<i></i></li>
						<li class="sku-line">两支手袋装（送彩带）<i></i></li>
					</ul>
				</li>
				<div class="theme-options">
					<div class="cart-title number">数量</div>
					<dd>
						<input class="min am-btn am-btn-default" name="" type="button" value="-" />
						<input class="text_box" name="" type="text" value="1" style="width:30px;" />
						<input class="add am-btn am-btn-default" name="" type="button" value="+" />
						<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
					</dd>

				</div>
				<div class="clear"></div>
				<div class="btn-op">
					<div class="btn am-btn am-btn-warning">确认</div>
					<div class="btn close am-btn am-btn-warning">取消</div>
				</div>

			</div>
			<div class="theme-signin-right">
				<div class="img-info">
					<img src="static/images/kouhong.jpg_80x80.jpg" />
				</div>
				<div class="text-info">
					<span class="J_Price price-now">¥39.00</span>
					<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
				</div>
			</div>

		</form>
	</div>
</div>
<!--引导 -->
<div class="navCir">
	<li><a href="home.html"><i class="am-icon-home "></i>首页</a></li>
	<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
	<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>
	<li><a href="person/index.html"><i class="am-icon-user"></i>我的</a></li>
</div>
</div>

<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script type="text/javascript">
	var baseUrl = "http://localhost:8080/";
	var vm = new Vue({
		el:"#container",
		data:{
            username:"",
            userImg:"",
            isLogin:false,
		    token:"",
            shopcarts:[],
			opts:[],
			totalPrice:0.00,
		},
		watch:{
		    opts:function (){
		        this.totalPrice=0;
                for (var i = 0; i < this.opts.length; i++) {
					var index = this.opts[i];	//index就是选择的购物车记录的索引
					this.totalPrice = this.totalPrice+this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
                }
			}
		},
		created:function () {
            var token = getCookieValue("token");
            //console.log(token);
            if (token!=null&&token!=""){
                this.isLogin=true;
                this.username = getCookieValue("username");
                this.userImg = getCookieValue("userImg");
            }

            //当进入到购物车页面时，就要查询购物车列表（访问购物车列表接口）
            var token = getCookieValue("token");
            if (token==null){
                var loginUrl = "login.html?tips=请先登录!&returnUrl=shopcart.html";
                window.location.href=encodeURI(loginUrl);
			}else {
                //已经登录,发送Ajax请求，查询购物车列表
				url = baseUrl+"shopcart/list";
				var userId = getCookieValue("userId");
				this.token = token;
				axios({
					url:url,
					method:"get",
					headers:{token:token},
					params:{userId:userId},
				}).then((res)=>{

                    if (res.data.code==20001||res.data.code==20002){
                        //登录过期或者需要重新登录

					}else if (res.data.code==10001){

					}else if (res.data.code==10000){
                        //请求成功
						this.shopcarts=res.data.data;
                        //console.log(this.shopcarts)
					}
				});
			}
        },
		methods:{
		    //修改购物车商品数量
            changeNum:function (event) {
				var oper = event.srcElement.dataset.oper;
				var index = event.srcElement.dataset.id;
				if (oper=="-"&&this.shopcarts[index].cartNum>1){
				    this.shopcarts[index].cartNum=parseInt(this.shopcarts[index].cartNum)-1;
				}else if (oper=="+"){
                    this.shopcarts[index].cartNum=parseInt(this.shopcarts[index].cartNum)+1;
				}
                //发送请求修改数量
				var cid = this.shopcarts[index].cartId;
				var cnum = this.shopcarts[index].cartNum;
				var url2 = baseUrl+"shopcart/update/"+cid+"/"+cnum;
				axios({
					url:url2,
					method: "put",
					headers: {token:this.token},
				}).then((res)=>{
                    console.log(res.data);
                    if (res.data.code==10000){
                        this.totalPrice=0;
                        for (var i = 0; i < this.opts.length; i++) {
                            var index = this.opts[i];	//index就是选择的购物车记录的索引
                            this.totalPrice = this.totalPrice+this.shopcarts[index].cartNum * this.shopcarts[index].sellPrice;
                        }
					}
				});
            },
			//删除购物车商品
            delCartShop:function (event){
                var index = event.srcElement.dataset.id;
                var cid = this.shopcarts[index].cartId;
                var url3 = baseUrl+"shopcart/delete/"+cid;
                axios({
					url:url3,
					method:"delete",
					headers:{token:this.token},
				}).then((res)=>{
                    console.log(res.data);
                    if (res.data.code==10000){
                        window.location.reload();
					}
				});
			},
			//提交订单
            gotoOrderAdd:function (){
                if (this.opts.length==0){
                    alert("请选择购买的商品");
				}else {
                    var cids = "";
                    for (var i = 0; i < this.opts.length; i++) {
                        var index = this.opts[i];	//index就是选择的购物车记录的索引
                        var cartId = this.shopcarts[index].cartId;	//获取选中的cartId
                        if (i<this.opts.length-1){
                            cids=cids+cartId+",";
						}else {
                            cids=cids+cartId;	//最后一个id
						}
                    }
                    console.log(cids);
                    window.location.href="order-add.html?cids="+cids;
				}
			}
		}
	});
</script>
</body>

</html>